<template>
	<view class="input">
		<view class="input_box" v-if="user.isLogin">
			<textarea class="input_box_textarea" v-model="content" auto-height fixed
				placeholder="请输入或复制查询身份证号..." maxlength="-1" />
			
			<view v-if="content.length >= 18">
				<view class="input_box_close" @click="close">
					<rui-icons icon="close" size="40" color="#999"></rui-icons>
				</view>
				<view class="input_box_button" @click="send">
					<rui-icons icon="send" size="40" color="#fff"></rui-icons>
				</view>
			</view>
			
		</view>
		<view class="input_tips" v-else @click="$rui.route('/pages/user/login/login')">
			<rui-icons icon="user-full" color="#999"></rui-icons>
			<view class="input_tips_text">
				您还未登录，请登录后操作
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		userStore
	} from "@/store"
	const emits = defineEmits(['send'])
	let content = ref("")

	let user = userStore()

	const close = () => {
		content.value = "";
	}

	const send = () => {
		emits('send', content.value)
		content.value = "";
	}
</script>

<style lang="scss" scoped>
	.input {
		position: fixed;
		bottom: -2rpx;
		left: 0;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background: #f6f7f8;
		z-index: 99;

		&_tips {
			font-size: 24rpx;
			padding: 15rpx;
			color: #999;
			display: flex;
			align-items: center;
			justify-content: center;

			&_text {
				margin-left: 10rpx;
			}
		}

		&_box {
			position: relative;
			padding: 25rpx;
			background: #fff;
			overflow-y: auto;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);

			&_textarea {
				width: calc(100% - 125rpx);
				max-height: 200rpx;
			}
			
			&_close{
				position: fixed;
				bottom: 35rpx;
				right: 130rpx;
			}

			&_button {
				position: fixed;
				bottom: 35rpx;
				right: 45rpx;
				background: var(--color);
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				z-index: 2;
				text-align: center;
				line-height: 60rpx;
			}
		}

	}
</style>